{% load transdigest helpers %}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head profile="http://dublincore.org/documents/dcq-html/">
        <link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
        <link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" />
        <link rel="stylesheet" type="text/css" href="{% media_url %}/homepage/css/web0.5.css" media="screen" />

        <title>{% block title %}{% translate "WELCOME_TO_POINTTEC" %}{% endblock %}</title>
        <meta name="DC.title" content="Homepage of point TEC" />
        <meta name="DC.creator" content="Marek Kubica" />
        <meta name="DC.subject" content="Presentation of products" />
        <meta name="DC.publisher" content="point TEC" />
        <meta name="DC.rights" content="copyright by point TEC" />
        {% block htmlhead %}

        {% endblock %}
        <style type="text/css">
        	{ % block pagestyle % }
	* {
		margin: 0;
		padding: 0;
	}
	img {
		border: 0
	}

	html, body {
		height: 100%;
	}

	#distance {
		width: 1px;
		height: 50%;
		margin-bottom: -175px;
	}
	#container {
		position: relative;
		margin: 0 auto;
		height: 370px;
		width: 500px;
		background-color: #ffffff;
	}
	/* the horizontal bars */
	#flashcontent * div {
		background-color: #292926;
	}

	#pointer {
		display: block;
		margin: 0 auto;
	}

        	{ % endblock % }
        </style>
	<script type="text/javascript" src="{% media_url %}/homepage/js/jquery.js"></script>
	<script type="text/javascript" src="{% media_url %}/homepage/js/jquery.preload.js"></script>
	<script type="text/javascript" src="{% media_url %}/homepage/js/swfobject.js"></script>
	<script type="text/javascript">
	function image_loaded(info) {
		/* now we know that the image is loaded, we can add in to the
		 * document and position it as we want */
		// create the element, set the ID and add in to the DOM,
		// otherwise it won't have dimensions
		var pointer = $('<img src="' + info.image + '" />');
		pointer.attr('id', 'pointer');
		var frame = $('#container');
		pointer.appendTo(frame);

		// put it into the center and make top & left be in the center
		// of the image (cool hack)
		pointer.css({
			position: 'absolute',
			top: '50%',
			left: '50%',
			margin: (-pointer.height() / 2) + 'px 0 0 ' +
				(-pointer.width() / 2) + 'px'
		});

		// continue with the animation now
		play_animation();
	}
	
	function prepare_animation() {
		/* prepares animation by preloading stuff */
		// hide all panels
		$('a > img').css('visibility', 'hidden');
		// create the logo - 'pointer': preload and center it
		$.preload(['logo'], {
			base: '{ % media_url % }/homepage/img/intro/',
			ext: '.png',
			onFinish: image_loaded
		});
	}
	
	function play_animation() {
	/* plays the animations, adds callbacks */
	var frame = $('#container');
	var pointer = $('#pointer');

	/* run the effects now: first fade in the pointer, then move it
	 * to the edge of the frame, then fade in the panels
	 */
	pointer.hide().fadeIn(2000)
	       .animate({
			top: pointer.height() / 2 + 10,
			left: frame.width() - pointer.width() / 2
			}, 3000, undefined, function() {
				var panels = $('a > img');
				// show panels, fade them in and add callbacks
				panels.css({ visibility: 'visible', 
					opacity: '0'})
				      .fadeTo(1000, 0.5)
				      .mouseover(fade_in)
				      .mouseout(fade_out);
				});
	}

	function fade_in() {
		/* fade in the panel */
		$(this).fadeTo(300, 1);
	}

	function fade_out() {
		/* fade out the panel */
		$(this).fadeTo(300, 0.5);
	}

	// start JS magic when the page has loaded
	$(document).ready(prepare_animation);
	</script>

    </head>

{% block body %}
<body>

<div id="distance"></div>
<div id="container">
  <div id="flashcontent">

    <table border="0">
      <tr>
        <td colspan="3"><div style="height: 63px;" /></td>
      </tr>
      <tr>
        <td><a href="/junkers/"><img src="{% media_url %}/homepage/img/intro/panel_junkers.jpg" alt="junkers" width="166" height="221" /></a></td>
        <td><a href="/zeppelin/"><img src="{% media_url %}/homepage/img/intro/panel_zeppelin.jpg" alt="zeppelin" width="168" height="221" /></a></td>
        <td><a href="/maximilian/"><img src="{% media_url %}/homepage/img/intro/panel_maximilian.jpg" alt="maximilian" width="162" height="221" /></a></td>
      </tr>
      <tr>
        <td colspan="3"><div style="height: 66px;" /></td>
      </tr>
    </table>
  </div>

  <script type="text/javascript">
	// <![CDATA[
	var so = new SWFObject("{% media_url % }/homepage/swf/intro_{ % translate "LANGUAGE_NAME" % }.swf", "intro", "500", "370", "9", "#FFF");
	so.addParam("allowScriptAccess", "always");
	so.write("flashcontent");
	// ]]>
  </script>

</div>
</div>

</body>
{% endblock %}

</html>
